<template>
  <el-form-item label-width="0">
    <el-divider class="custom-divider-margin-top">表格列配置</el-divider>
    <draggable
      tag="ul"
      :list="optionModels.tableColumn"
      v-bind="{
        group: 'optionsGroup',
        ghostClass: 'ghost',
        handle: '.drag-option',
      }"
    >
      <div class="li" style="white-space: nowrap">
        <span class="emptyTop"></span>
        &nbsp;&nbsp;
        <span class="headTop">Label</span>
        &nbsp;
        <span class="headTop">key</span>
        &nbsp;
        <span class="headTop2">排序</span>
        &nbsp;
        <span class="headTop2">筛选</span>
        &nbsp;
        <span
          class="headTop2"
          v-if="optionModels.tableColumn.some((v) => !!v.filters)"
          >数据</span
        >
        &nbsp;&nbsp;
      </div>
      <li v-for="(option, idx) in optionModels.tableColumn" :key="idx">
        <div class="li">
          <i class="el-icon-rank drag-option"></i>
          &nbsp;&nbsp;
          <el-input
            v-model="option.label"
            size="mini"
            style="width: 100px"
          ></el-input>
          &nbsp;
          <el-input
            v-model="option.prop"
            size="mini"
            style="width: 100px"
          ></el-input>
          &nbsp;
          <el-switch v-model="option.sortable"> </el-switch>
          &nbsp;
          <el-switch v-model="option.filters"> </el-switch>
          &nbsp;
          <div class="bind" @click="showSourceData(option,idx)" v-if="option.filters">
            <svg-icon icon-class="code" />
          </div>
          <span
            class="headTop3"
            v-if="
              !option.filters &&
              optionModels.tableColumn.some((v) => !!v.filters)
            "
          ></span>
          &nbsp;&nbsp;
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="deleteColumn(idx)"
          ></el-button>
        </div>
      </li>
    </draggable>
    <el-button type="text" @click="addColumn">新增一项</el-button>

    <el-dialog
      :visible.sync="dVisible"
      title="编辑筛选数据"
      :append-to-body="true"
      destroy-on-close
    >
      <code-editor
        :mode="'json'"
        :readonly="false"
        v-model="code"
      ></code-editor>

      <div slot="footer">
        <el-button size="small" type="primary" @click="save">确定</el-button>
        <el-button size="small" @click="dVisible = false,code=''">取消</el-button>
      </div>
    </el-dialog>
  </el-form-item>
</template>
<script>
import Draggable from "vuedraggable";
import SvgIcon from "@/components/svg-icon/index.vue";
import CodeEditor from "@/components/code-editor/index.vue";

export default {
  name: "tableColumn-editor",
  components: { Draggable, SvgIcon, CodeEditor },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      dVisible: false,
      currentIndex: 0,
      code: "",
    };
  },
  computed: {
    optionModels() {
      return this.selectedWidget.options;
    },
  },
  methods: {
    showSourceData(option,idx) {
      console.log('ccccccccccccc',this.code)
      this.currentIndex = idx;
      this.code = JSON.stringify(option.filterData);
      this.dVisible = true;
    
    },
    save() {
      this.dVisible = false;
      if(this.code){
        this.optionModels.tableColumn[this.currentIndex].filterData = JSON.parse(this.code);
      }
    },
    deleteColumn(index) {
      this.optionModels.tableColumn.splice(index, 1);
    },
    addColumn() {
      this.optionModels.tableColumn.push({
        label: "",
        prop: "",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.bind {
  display: inline-block;
  cursor: pointer;
}
.headTop3 {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.35em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.li {
  white-space: nowrap;
}
.emptyTop {
  display: inline-block;
  width: 12px;
}
.headTop {
  display: inline-block;
  width: 80px !important;
  text-align: center;
}
.headTop2 {
  display: inline-block;
  width: 40px !important;
  text-align: center;
}
ul {
  padding-left: 10px;
  list-style: none;

  li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 5px;

    ::v-deep .el-input--mini {
      width: 80px !important;
    }
    ::v-deep .el-switch__core {
      width: 40px !important;
    }
  }
}
</style>
